<template>
  <a-page-header :title="$t('135')" @back="() => $router.go(-1)">
    <template #extra>
      <a-flex gap="small" justify="flex-end">
        <a-input-search
          v-model:value="filter"
          :placeholder="$t('103')"
          @search="onSearch"
          @pressEnter="onSearch"
        />
        <a-button
          type="primary"
          @click="goNewRecord"
          :disabled="!channel.visitToken.vg.writeAble"
          >{{ $t("126") }}</a-button
        >
      </a-flex>
    </template>
  </a-page-header>
  <a-layout>
    <a-layout-sider
      :style="{ 'background-color': '#F5F5F5', height: sideHeight + 'px' }"
      :width="324"
    >
      <h3>
        查询条件
        <a-button
          type="primary"
          style="float: right; margin-top: -8px"
          @click="loadModelRecords"
          >{{ $t("104") }}</a-button
        >
      </h3>
      <QueryFilterEditor ref="refQfe"></QueryFilterEditor>
      <p>
        <label>排序</label><br /><a-radio-group
          v-model:value="state.selectedOrder"
        >
          <a-radio-button value="old_to_new">从旧到新</a-radio-button>
          <a-radio-button value="new_to_old">从新到旧</a-radio-button>
        </a-radio-group>
      </p>
      <p style="text-align: center"></p>
    </a-layout-sider>
    <a-layout-content style="background-color: white">
      <RecordTable
        ref="refRTV"
        :filter="filter"
        :api-filters="apiFilters"
        :share-mode="true"
        @modify="onModify"
      >
      </RecordTable>
    </a-layout-content>
  </a-layout>
  <a-drawer
    v-model:open="state.popEditor"
    :title="$t('126')"
    size="large"
    :bodyStyle="{ padding: '4px' }"
    :headerstyle="{ padding: '4px' }"
  >
    <RecordEditor ref="refRE" share-mode="true"></RecordEditor>
  </a-drawer>
</template>
<script setup>
import { computed, nextTick, onMounted, reactive, ref } from "vue";
import CommonDefine from "@/component/CommonDefine";
import RecordEditor from "@/component/record/RecordEditor.vue";
import RecordTable from "@/component/record/RecordTable.vue";
import QueryFilterEditor from "@/component/query/QueryFilterEditor.vue";

const channel = CommonDefine.channel();
const state = reactive({
  popEditor: false,
  popFieldValue: false,
});
const filter = ref("");
const refQfe = ref();
const refRTV = ref();
const refRE = ref();

const apiFilters = computed(() => {
  if (refQfe.value) {
    return refQfe.value.getFilters();
  } else {
    return {};
  }
});

const sideHeight = computed(() => {
  return document.documentElement.clientHeight - 56;
});

const loadModelRecords = () => {
  nextTick(() => {
    refRTV.value.loadRecords();
  });
};

const goNewRecord = () => {
  channel.recordInEditting = undefined;
  state.popEditor = true;
  nextTick(() => {
    refRE.value.setRecord(undefined);
  });
};

const onModify = (event) => {
  channel.recordInEditting = event;
  state.popEditor = true;
  nextTick(() => {
    refRE.value.setRecord();
  });
};

const onSearch = () => {
  refRTV.value.doSearch();
};

onMounted(() => {
  loadModelRecords();
});
</script>
